@import 'public';
header{
    position: relative;
        ul{
            box-sizing: border-box;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: absolute;
            top: 1rem;
            left: 0;
            z-index: 100;
            li{
                width: 6.4rem;
                height: 6.4rem;
                border-radius: 100%;
                background-color:rgba(51,51,51,0.5);
                display: block;
                z-index: -1;
                position: relative;
                .return{
                    display: block;
                    width: 1.4rem;
                    position: absolute;
                    top: 2rem;
                    left: 2.2rem;
                }
                .shop{
                    display:block;
                    width: 3.1rem;
                    position: absolute;
                    top: 1.5rem;
                    left: 1.5rem;
                }
                .more{
                    display:block; 
                    width: 3rem;
                    position: absolute;
                    top: 3rem;
                    left: 1.6rem;
                }
            }
            li:nth-of-type(2){
                margin-left: 48rem;
            }
        }
    }
section{
    overflow: hidden;
    // border-bottom: .2rem solid #f3f3f2;
}
section>.preview{
    text-align: center;
    margin-top: 2.5rem;
    img{
        width: 70.7rem;
        height: 62.5rem;
    }
}
section>.price-box{
    .price{
        display: flex;
        justify-content: space-between;
        margin-top: 3rem;
        li:nth-child(1){
            p:nth-of-type(1){
                font-size: 4.2rem;
                color: #ff433c;
                margin-bottom: 1rem;
            }
            p:nth-of-type(2){
                font-size: 2.6rem;
                color: #9a9a9b;
                margin-left: .9rem;
                margin-bottom: 1rem;
                span{
                    text-decoration: line-through;
                }
            }
        }
        li:nth-child(2){
            img{
                width: 4.2rem;
                height: 4.2rem;
            }
            p{
                font-size: 2.4rem;
                color: #000000;
            }
        }
    }
    .fenqi{
        position: relative;
        p{
            font-size: 3.2rem;
            color: #0a0a0a;
            text-indent:7rem;
        }
        img{
            width: 6rem;
            height: 3rem;
            position: absolute;
            top: .6rem;
            left: 0rem;
        }
    }
    .detailed-box{
        display: flex;
        margin-top: 3rem;
        li{
             flex-shrink: 0;
             margin-right: 4.2rem;
             text-align: center;
            img{
                width: 5.6rem;
                height: 5.1rem;
            }
            p{
                width: 13rem;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
            p:nth-of-type(1){
                font-size: 2.4rem;
                color: #0a0a0a;
                font-weight: bold;
            }
            p:nth-of-type(2){
                font-size: 2.2rem;
                color: #999999;
            }
        }
    }
    .information-box{
        display: flex;
        justify-content: space-between;
        margin-top: 3rem;
        li{
            font-size: 2.4rem;
            color: #999999;
        }
    }
    .select-box{
        .select{
            display: flex;
            justify-content: space-between;
            margin-top: 6rem;
            p{
                    font-size: 2.8rem;
                    color: #131313;
                    font-weight: bold;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    width: 63rem;
                    display: inline-block;
                span{
                    font-size: 2.8rem;
                    color: #999999;
                    margin-right: 2rem;
                }
            }
            img{ 
                float: right; 
                width: 1.4rem; 
                height: 2.5rem;
                display: block;
                margin-top: .8rem;
            }
        }
    }
    .appraise-box{
        .appraise{
            display: flex;
            justify-content: space-between;
            margin-top: 4rem;
            li{
                font-size: 2.8rem;
                color: #131313;
            }
            li:nth-of-type(2){
                color: #9a9a9a;
                img{
                    float: right; 
                    width: 1.4rem; 
                    height: 2.5rem;
                    display: block;
                    margin-top: .8rem; 
                    margin-left: 3rem;
                }
            }

        }
        .appraise-item{
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            margin-top: 4rem;
            margin-bottom: 2rem;
            li{
                width: 20.4rem;
                height: 5.2rem;
                line-height: 5.2rem;
                font-size: 2.4rem;
                font-weight: bold;
                text-align: center;
                color: #080302;
                background-color: #ffe6e2;
                border-radius: 4rem;
                margin-bottom: 2rem;
                span{
                    margin-left: 1rem;
                }
                
            }
        }
    }
    .line{
        width: 75rem;
        height: .2rem;
        background-color: #f3f3f2;
    }
    .user-box{
        margin-top: 2.5rem;
        height: 40rem;
        .user{
            display: flex;
            justify-content:left;
            align-items: center;
            li:nth-of-type(1){
                img{
                    width: 6rem;
                    height: 6rem;
                }
            }
            li:nth-of-type(2){
                font-size: 2.4rem;
                color: #080302;
                margin-left: 2rem;
            }
            li:nth-of-type(3){
                margin-left: auto;
                img{
                    width: 14.5rem;
                    height: 2.2rem;
                }
            }
        }
        p{
            color: #080302;
            font-size: 2.4rem;
            margin: 2.5rem 0;
        }
        .user-img{
            display: flex;
            justify-content: space-between;
            li{
                img{
                    width: 15rem;
                    height: 15rem;
                }
            }
        }
    }
}

footer{
    div{
        position: fixed;
        bottom: 0;
        z-index: 10;
        ul{
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-top: 3rem;
            height: 10rem;
            background-color: white;
            li{
                margin-left: 3rem;
                text-align: center;
                p{
                    font-size: 2rem;
                    color: #868686;
                }
            }
            li:nth-of-type(1){
                img{
                    width: 3.8rem;
                    height: 4.1rem;
                }
            }
            li:nth-of-type(2){
                margin-left: 5rem;
                img{
                    width: 4rem;
                    height: 4rem;
                }
            }
            li:nth-of-type(3){
                margin-left: auto;
                span{
                    display: block;
                    width: 51.2rem;
                    height: 10rem;
                    line-height: 10rem;
                    font-size: 3.6rem;
                    color: white;
                    background-color: #fa4930;
                }
            }
        }
    }
}